<template>
  <el-tree
    class="project-tree"
    ref="treeRef"
    :data="data"
    :node-key="nodeKey"
    :props="treeProps"
    @node-click="handleNodeClick"
    accordion
    :indent="0"
    :highlight-current="highlightCurrent"
    :default-expand-all="true">
    <template #default="{ node, data }">
      <span v-if="node.level === 1 && !data.projectCode" class="tree-icon">
        <SvgIcon size="18px" :name="node.expanded ? 'open-tree' : 'close-tree'"></SvgIcon>
      </span>
      <div class="custom-tree-node">
        <!-- <el-tooltip :content="node.label"> -->
        <span class="node-label">{{ node.label }}</span>
        <!-- </el-tooltip> -->
        <span class="node-num" v-if="numShow && data.projectCode">
          {{ data.infoCount }}
        </span>
        <span class="action" style="margin-right: 10px">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-icon size="16"><MoreFilled /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="edit(data)">编辑</el-dropdown-item>
                <el-dropdown-item @click="remove(data)">删除</el-dropdown-item>
                <!-- <el-dropdown-item @click="projectInfo(data)" v-if="node.level === 1 && !data.projectCode">
                  项目列表
                </el-dropdown-item> -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </span>
      </div>
    </template>
  </el-tree>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { getTcTaskProjectList } from '@/assets/api/project'
import { MoreFilled } from '@element-plus/icons-vue'

const props = defineProps({
  // 是否高亮当前节点
  highlightCurrent: Boolean,
  // 是否显示标题后的数值(也可判断任务名是否随状态变色)
  numShow: Boolean,
  // 树节点唯一绑定值
  nodeKey: String,
})
const emit = defineEmits(['nodeClick', 'eidtNode', 'removeNode', 'projectInfoNode'])
const treeRef = ref(null)
defineExpose({
  getTreeData,
  refreshProcess,
  treeRef,
})

const treeProps = reactive({
  children: 'children',
  label: 'projectName',
})

const data = ref([])

// 查询项目组树
async function getTreeData(projectName) {
  await getTcTaskProjectList({ projectName }).then((res) => {
    if (res.code === 200) {
      data.value = res.rows
    } else {
      ElMessage.error(res.msg)
    }
  })
}

async function refreshProcess(projectId) {
  await getTreeData()
  treeRef.value.setCurrentKey(projectId)
}

function handleNodeClick(data) {
  emit('nodeClick', data)
}
function edit(data) {
  emit('editNode', data)
}
function remove(data) {
  emit('removeNode', data)
}
function projectInfo(data) {
  emit('projectInfoNode', data)
}

onMounted(() => {
  getTreeData()
})
</script>

<style scoped lang="scss">
.project-tree {
  .tree-icon {
    display: flex;
    align-items: center;
    margin-right: 5px;
  }
  --elp-tree-node-hover-bg-color: var(--elp-color-primary-light-9);
  :deep(.elp-tree-node) {
    &.is-current {
      & > .elp-tree-node__content {
        color: var(--elp-color-primary);
        background-color: var(--elp-fill-color-light);
      }
    }
    .elp-tree-node__content {
      height: auto;
      padding: 8px 0;
      border-radius: 6px;
      justify-content: space-between;
      .action {
        opacity: 0;
        transition: opacity 0.5s;
        .elp-dropdown-link {
          color: var(--elp-color-info-light-5);
        }
      }
      .elp-tree-node__expand-icon.expanded {
        font-size: 14px;
        color: var(--elp-color-primary);
      }
      &:hover {
        background-color: var(--elp-fill-color-light);
        .action {
          opacity: 1;
          transition: opacity 0.5s;
        }
      }
    }
    .elp-tree-node__children {
      margin-left: 16px;
    }
  }
  .custom-tree-node {
    @include use-flex(center, space-between);
    width: 100%;
    max-width: 191px;
    .node-label {
      overflow: hidden;
      text-overflow: ellipsis;
      width: 81%;
    }
    .node-num {
      color: var(--elp-text-color-secondary);
    }
  }
}
</style>
